frontend/pages/e/[uuid]/index.tsx (view raw)
1import {useState, useReducer, PropsWithChildren} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import {useTranslation} from 'react-i18next';
4import EventLayout, {TabComponent} from '../../../layouts/Event';
5import TravelColumns from '../../../containers/TravelColumns';
6import NewTravelDialog from '../../../containers/NewTravelDialog';
7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
8import {
9 EventByUuidDocument,
10 FindUserVehiclesDocument,
11 useFindUserVehiclesQuery,
12} from '../../../generated/graphql';
13import Fab from '../../../containers/Fab';
14import pageUtils from '../../../lib/pageUtils';
15import {getSession, useSession} from 'next-auth/react';
16
17interface Props {
18 eventUUID: string;
19 announcement?: string;
20}
21
22const Page = (props: PropsWithChildren<Props>) => {
23 return <EventLayout {...props} Tab={TravelsTab} />;
24};
25
26const TravelsTab: TabComponent = (props: {event}) => {
27 const classes = useStyles();
28 const {t} = useTranslation();
29 const session = useSession();
30 const isAuthenticated = session.status === 'authenticated';
31 const {data} = useFindUserVehiclesQuery({
32 skip: !isAuthenticated,
33 });
34 const vehicles = data?.me?.profile?.vehicles?.data || [];
35 const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
36 const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
37
38 const addTravelClickHandler =
39 isAuthenticated && vehicles?.length != 0
40 ? toggleVehicleChoice
41 : () => toggleNewTravel({opened: true});
42
43 return (
44 <>
45 <TravelColumns toggle={addTravelClickHandler} />
46 <Fab
47 onClick={addTravelClickHandler}
48 aria-label="add-car"
49 color="primary"
50 className={classes.bottomRight}
51 >
52 {t('travel.creation.title')}
53 </Fab>
54 <NewTravelDialog
55 context={openNewTravelContext}
56 toggle={() => toggleNewTravel({opened: false})}
57 />
58 <VehicleChoiceDialog
59 open={openVehicleChoice}
60 toggle={toggleVehicleChoice}
61 toggleNewTravel={toggleNewTravel}
62 vehicles={vehicles}
63 />
64 </>
65 );
66};
67
68const useStyles = makeStyles(theme => ({
69 bottomRight: {
70 bottom: 0,
71 right: theme.spacing(6),
72
73 [theme.breakpoints.down('sm')]: {
74 right: theme.spacing(1),
75 bottom: 56,
76 },
77 },
78}));
79
80export const getServerSideProps = pageUtils.getServerSideProps(
81 async (context, apolloClient) => {
82 const {uuid} = context.query;
83 const {host = ''} = context.req.headers;
84 const session = await getSession(context);
85 let event = null;
86
87 // Fetch event
88 try {
89 const {data} = await apolloClient.query({
90 query: EventByUuidDocument,
91 variables: {uuid},
92 });
93 event = data?.eventByUUID?.data;
94 } catch (error) {
95 return {
96 notFound: true,
97 };
98 }
99
100 // Fetch user vehicles
101 if (session)
102 await apolloClient.query({
103 query: FindUserVehiclesDocument,
104 });
105
106 return {
107 props: {
108 eventUUID: uuid,
109 metas: {
110 title: event?.attributes?.name || '',
111 url: `https://${host}${context.resolvedUrl}`,
112 },
113 },
114 };
115 }
116);
117
118export default Page;